<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['设备安装管理', '维修管理V2', '订单管理']"
      icon="fa fa-wrench"
      class="col-xs-12 col-sm-7 col-md-7"
    ></sa-big-breadcrumbs>
  </div>

  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>订单管理</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <sa-company-tree-car
                  companyTreeId="companyTree"
                  (companySelected)="companySelected($event)"
                ></sa-company-tree-car>
                <!-- <div class="top_module top_module_box">
									<span class="module_text">车牌号码</span>
									<div class="s_hover_box">
										<select   class="select2"  id="carNumberSelect">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='del_carNumber()'>x</div>
									</div>
								</div> -->
                <!-- <div class="top_module top_module_box">
									<span class="top_module_label module_text">费用类型</span>
									<select name="" class="top_module_select" [(ngModel)]="tableSearch.typeExpense">
										<option value=''>全部</option>
										<option value='1'>安装费</option>
										<option value='2'>维修费</option>
										<option value='3'>服务续费</option>
									</select>
								</div> -->
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">支付状态</span>
                  <select name="" class="top_module_select" [(ngModel)]="tableSearch.payStatus">
                    <option value="">全部</option>
                    <option value="1">待支付</option>
                    <option value="2">已支付</option>
                    <option value="3">订单取消</option>
                    <option value="4">已完成</option>
                  </select>
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">时间类型</span>
                  <select name="" class="top_module_select" [(ngModel)]="tableSearch.dateType">
                    <option value="">全部</option>
                    <option value="1">创建时间</option>
                    <option value="2">更新时间</option>
                  </select>
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">审核状态</span>
                  <select name="" class="top_module_select" [(ngModel)]="tableSearch.auditStatus">
                    <option value="">全部</option>
                    <option value="1">待审核</option>
                    <option value="2">已审核</option>
                    <option value="3">订单取消</option>
                    <option value="4">撤销审核</option>
                    <option value="5">无需审核</option>
                  </select>
                </div>
                <div class="selectDate top_module">
                  <table-select-date [notInit]="true" (outerTime)="getSelectTableTime($event)"></table-select-date>
                </div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button class="btn btn-primary" (click)="exportTable()">导出</button>
              </div>
              <!--<div class="right top-search" style="width: 280px;">
								<input type="text" [(ngModel)]="tableSearch.searchKey" (change)="table_search()" class="search-input" placeholder="车牌号、设备ID、商户订单、用户、手机">
								<span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
							</div>-->
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <!-- <th>设备ID</th> -->
                    <th>用户</th>
                    <th>手机号码</th>
                    <th>所属公司</th>
                    <th>车牌号码</th>
                    <th>设备ID</th>
                    <th>平台订单号</th>
                    <th>商户订单号</th>
                    <th>支付订单号</th>
                    <th>商品名称</th>
                    <th>总价[元]</th>
                    <th>支付方式</th>
                    <th>支付状态</th>
                    <th>费用类型</th>
                    <th>是否自主支付</th>

                    <th>审核状态</th>
                    <th>审核人员</th>
                    <th>审核时间</th>

                    <th>支付时间</th>
                    <th>备注</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <!-- <td>{{row.deviceId}}</td> -->
                    <td>{{ row.userName ? row.userName : row.userNickName }}</td>
                    <td>{{ row.phone }}</td>
                    <td>{{ row.companyName }}</td>
                    <td>{{ row.carNumber }}</td>
                    <td>{{ row.deviceId }}</td>
                    <td>{{ row.platformNumber }}</td>
                    <td>{{ row.businessNumber }}</td>
                    <td>{{ row.payNumber }}</td>
                    <td>{{ row.goodsName }}</td>
                    <td>{{ row.price / 100 }}</td>
                    <td>
                      <span *ngIf="row.payWay == 0">个人支付</span>
                      <span *ngIf="row.payWay == 1">对公转账</span>
                    </td>
                    <td>
                      <span *ngIf="row.payStatus == 1" class="orange">待支付</span>
                      <span *ngIf="row.payStatus == 2" class="green">已支付</span>
                      <span *ngIf="row.payStatus == 3" style="color: #bbbbbb">订单取消</span>
                      <span *ngIf="row.payStatus == 4" class="green">已完成</span>
                    </td>
                    <td>
                      <span *ngIf="row.typeExpense == 1">安装费</span>
                      <span *ngIf="row.typeExpense == 2">维修费</span>
                      <span *ngIf="row.typeExpense == 3">服务续费</span>
                    </td>
                    <td>
                      <span *ngIf="row.isDirectPay == 1">是</span>
                      <span *ngIf="row.isDirectPay == 0">不是</span>
                    </td>
                    <td>
                      <span *ngIf="row.auditStatus == 1" class="orange">待审核</span>
                      <span *ngIf="row.auditStatus == 2" class="green">已审核</span>
                      <span *ngIf="row.auditStatus == 3" style="color: #bbbbbb">订单取消</span>
                      <span *ngIf="row.auditStatus == 4" style="color: #bbbbbb">撤销审核</span>
                      <span *ngIf="row.auditStatus == 5" class="blue">无需审核</span>
                    </td>
                    <td>{{ row.auditUser }}</td>
                    <td>{{ row.auditDate }}</td>
                    <td>{{ row.payDate }}</td>
                    <td>{{ row.remark }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.updateTime }}</td>
                    <td>
                      <button *ngIf="row.payWay == 1" type="button" (click)="riseEditRow(row, editRiseModel)">
                        编辑
                      </button>
                      <button *ngIf="delLimit" type="button" (click)="delRow(row)">刪除</button>
                      <button
                        type="button"
                        (click)="examineRow(row, examineRowModal)"
                        *ngIf="row.payStatus == 1 && row.auditStatus == 1"
                      >
                        审核
                      </button>
                      <button
                        type="button"
                        (click)="cancelCheck(row)"
                        *ngIf="row.payStatus == 1 && row.auditStatus == 2"
                      >
                        撤销审核
                      </button>
                      <button type="button" (click)="cancelRow(row)" *ngIf="row.payStatus == 1">取消订单</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <section
    bsModal
    #editRiseModel="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg" style="width: 850px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeRiseModal(editRiseModel)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">编辑</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group s_fix_select2">
              <label class="control-label col-xs-2 col-sm-2">
                车牌号码
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <input class="form-control" [(ngModel)]="riseEditRowForm.carNumber" disabled />
              </div>
            </div>
            <div class="form-group s_fix_select2">
              <label class="control-label col-xs-2 col-sm-2">
                所属厂区
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <input class="form-control" [(ngModel)]="riseEditRowForm.companyName" disabled />
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-2 control-label">
                支付方式
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <label class="radio radio-inline" style="margin-right: 40px">
                  <input type="radio" class="radiobox" value="1" name="typeExpense" disabled />
                  <span>对公转账</span>
                </label>
                <label class="radio radio-inline" style="margin-right: 40px">
                  <input type="radio" class="radiobox" value="3" name="typeExpense" checked />
                  <!-- <input *ngIf="editOrder.payType != 1" [checked]="!isTypeExpense" type="radio" class="radiobox" (change)="typeExpenseChange($event.target.value)" value='3' name="typeExpense"> -->
                  <span>个人支付</span>
                </label>
              </div>
            </div>
            <div
              class="form-group clearfix"
              *ngFor="let item of riseEditRowList; let i = index"
              style="margin-bottom: 5px"
            >
              <div class="contant">
                <div class="subject col-xs-12">
                  <div class="col-xs-2 subjectTit">{{ item.costDetail }}</div>
                  <div class="col-xs-4 subjectChoice">
                    <p class="subjectChoice-Tap1">
                      <label>
                        原价：{{ item.price }}元
                        <span *ngIf="item.unit">/{{ item.unit }}</span>
                        <input
                          type="checkbox"
                          [checked]="item.priceType == 1"
                          [name]="item.costDetail"
                          class="checkChoice"
                          value="1"
                          (click)="clickSalesTypes(1, i, $event.target.checked)"
                        />
                      </label>
                    </p>
                    <p class="subjectChoice-Tap2">
                      <label [ngClass]="{ disableCheck: item.discount == 0 }">
                        减免价：{{ item.discountPrice }}元
                        <span *ngIf="item.unit">/{{ item.unit }}</span>
                        <input
                          type="checkbox"
                          [checked]="item.priceType == 2"
                          [name]="item.costDetail"
                          class="checkChoice"
                          value="2"
                          (click)="clickSalesTypes(2, i, $event.target.checked)"
                          [disabled]="item.discount == 0"
                        />
                      </label>
                    </p>
                  </div>
                  <div class="col-xs-3 subjectNum" style="margin-left: 10px">
                    <div class="clearfix numWrap">
                      <span
                        class="reduce"
                        [ngClass]="{
                          activeChoce: item.count == 0 || (item.priceType != 0 && item.count == 1) || item.restrict == 0
                        }"
                      >
                        <i (click)="reduceNums($event.target, i)" class="fa fa-minus" aria-hidden="true"></i>
                      </span>
                      <!-- 小的数量框 -->
                      <input
                        class="form-control"
                        [id]="'count' + i"
                        [name]="'count' + i"
                        type="text"
                        autocomplete="off"
                        (input)="numInputs($event.target.value, i)"
                        (change)="numChanges($event.target.value, i)"
                        placeholder="数量"
                        [value]="item.count"
                        [disabled]="item.restrict == 0 || item.priceType == 0"
                      />
                      <span
                        class="add"
                        [ngClass]="{ activeChoce: (item.count == 0 && item.priceType == 0) || item.restrict == 0 }"
                      >
                        <i (click)="addNums($event.target, i)" class="fa fa-plus" aria-hidden="true"></i>
                      </span>
                    </div>
                  </div>
                  <div class="col-xs-2 subjectPrice">{{ item.totalPrice }}元</div>
                </div>
                <div class="remarks col-xs-12">
                  <p style="margin-left: 10px">
                    <span>备注：</span>
                    <input type="text" class="inputRemark" [(ngModel)]="item.remark" />
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeRiseModal(editRiseModel)">取消</button>
          <button type="button" class="btn btn-primary" (click)="submitRiseModal(editRiseModel)">提交</button>
        </div>
      </div>
    </div>
  </section>

  <!-- 添加BOM编码 -->
  <section
    bsModal
    #examineRowModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg" style="width: 850px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeAddBomModal(examineRowModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">审核</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group clearfix" *ngFor="let item of examineList; let i = index" style="margin-bottom: 5px">
              <div class="contant">
                <div class="subject col-xs-12">
                  <div class="col-xs-2 subjectTit">{{ item.costDetail }}</div>
                  <div class="col-xs-4 subjectChoice">
                    <p class="subjectChoice-Tap1">
                      <label>
                        原价：{{ item.price }}元
                        <span *ngIf="item.unit">/{{ item.unit }}</span>
                        <input
                          type="checkbox"
                          [checked]="item.priceType == 1"
                          [name]="item.costDetail"
                          class="checkChoice"
                          value="1"
                          (click)="clickSalesType(1, i, $event.target.checked)"
                        />
                      </label>
                    </p>
                    <p class="subjectChoice-Tap2">
                      <label [ngClass]="{ disableCheck: item.discount == 0 }">
                        减免价：{{ item.discountPrice }}元
                        <span *ngIf="item.unit">/{{ item.unit }}</span>
                        <input
                          type="checkbox"
                          [checked]="item.priceType == 2"
                          [name]="item.costDetail"
                          class="checkChoice"
                          value="2"
                          (click)="clickSalesType(2, i, $event.target.checked)"
                          [disabled]="item.discount == 0"
                        />
                      </label>
                    </p>
                  </div>
                  <div class="col-xs-3 subjectNum" style="margin-left: 10px">
                    <div class="clearfix numWrap">
                      <span
                        class="reduce"
                        [ngClass]="{
                          activeChoce: item.count == 0 || (item.priceType != 0 && item.count == 1) || item.restrict == 0
                        }"
                      >
                        <i (click)="reduceNum($event.target, i)" class="fa fa-minus" aria-hidden="true"></i>
                      </span>
                      <!-- 小的数量框 -->
                      <input
                        class="form-control"
                        [id]="'count' + i"
                        [name]="'count' + i"
                        type="text"
                        autocomplete="off"
                        (input)="numInput($event.target.value, i)"
                        (change)="numChange($event.target.value, i)"
                        placeholder="数量"
                        [value]="item.count"
                        [disabled]="item.restrict == 0 || item.priceType == 0"
                      />
                      <span
                        class="add"
                        [ngClass]="{ activeChoce: (item.count == 0 && item.priceType == 0) || item.restrict == 0 }"
                      >
                        <i (click)="addNum($event.target, i)" class="fa fa-plus" aria-hidden="true"></i>
                      </span>
                    </div>
                  </div>
                  <div class="col-xs-2 subjectPrice">{{ item.totalPrice }}元</div>
                </div>
                <div class="remarks col-xs-12">
                  <p style="margin-left: 10px">
                    <span>备注：</span>
                    <input type="text" class="inputRemark" [(ngModel)]="item.remark" />
                  </p>
                </div>
              </div>
            </div>
            <div class="form-group clearfix contantBottom">
              <p>
                <span>通过审核后，小程序内将生成“待付款”维修订单</span>
                <span class="totalParice">
                  总计：
                  <i>{{ TotalPrice }}元</i>
                </span>
              </p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeAddBomModal(examineRowModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="submitModal(examineRowModal)">提交审核</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 添加BOM编码  结束 -->
</div>
<style>
  .contant {
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 90%;
    margin: 0 auto;
    height: 105px;
  }
  .subject {
    width: 100%;
    border-bottom: 1px solid #ddd;
  }
  .subjectTit,
  .subjectPrice {
    text-align: center;
    height: auto;
    vertical-align: middle;
    height: 62px;
    line-height: 62px;
    padding: 0;
  }
  .subjectChoice {
    text-align: left;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .subjectChoice-Tap1 {
    margin-top: 2px;
  }
  .subjectChoice input[type='checkbox'] {
    width: 16px;
    height: 16px;
    visibility: hidden;
    margin: 4px 12px;
    line-height: 15px;
  }
  .subjectChoice input[type='checkbox']:after {
    width: 100%;
    height: 100%;
    content: ' ';
    background-color: #fff;
    display: inline-block;
    visibility: visible;
    border-radius: 8px;
    margin-top: 2px;
    border: 1px solid #ddd;
    text-align: center;
  }
  .subjectChoice input[type='checkbox']:checked:after {
    content: '\2713'; /*UNICODE中对号*/
    color: #fff;
    background-color: #5fc329;
    border-color: #5fc329;
  }

  .subjectChoice .disableCheck {
    color: #969494;
    cursor: no-drop;
  }
  .subjectChoice .disableCheck input[type='checkbox']:after {
    color: #969494;
    background-color: #969494;
    cursor: no-drop;
  }

  .subjectChoice .disableCheck input[type='checkbox']:checked:after {
    content: '';
    color: #fff;
    background-color: #969494;
    border-color: #969494;
  }

  .subjectNum {
    height: 62px;
    text-align: center;
    border-right: 1px solid #ddd;
  }
  .numWrap {
    position: relative;
    width: 71px;
    top: 15px;
    left: 50%;
    margin-left: -35px;
  }
  .numWrap input {
    width: 50px !important;
    padding: 0px !important;
    text-align: center;
  }
  .numWrap .reduce {
    position: absolute;
    left: -25px;
    bottom: 0px;
    font-size: 14px;
    display: inline-block;
    width: 24px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
  }
  .numWrap .add {
    cursor: pointer;
    position: absolute;
    right: -4px;
    bottom: 0px;
    font-size: 14px;
    display: inline-block;
    width: 24px;
    height: 32px;
    text-align: center;
    line-height: 32px;
  }
  .numWrap > span > i {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding-top: 9px;
    background-color: rgba(26, 109, 221, 1);
    border-color: rgba(26, 109, 221, 1);
    color: #fff;
  }
  .numWrap .activeChoce i {
    background-color: #939393;
    border-color: #939393;
    cursor: no-drop;
  }
  .remarks {
    padding: 6px 10px 0;
  }
  .contantBottom {
    width: 90%;
    margin: 20px auto 0px;
    position: relative;
  }
  .totalParice {
    position: absolute;
    right: 0;
    top: -5px;
  }
  .totalParice i {
    color: orange;
    font-style: normal;
    font-size: 16px;
  }
  .contant .inputRemark {
    width: 90%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    padding-left: 5px;
  }
</style>
